<template>
    <customNavigationBar :title="isAuthSuccess ? '实名认证' : '实名认证信息'" />

    <view class="content" v-if="!isAuthSuccess">
        <view class="title">实名身份验证</view>

        <view class="inputs">
            <view class="item">
                <view class="itemTitle">真实姓名</view>
                <input type="text" v-model.trim="userInfo.name" placeholder="请输入" />
            </view>
            <view class="item">
                <view class="itemTitle">身份证号</view>
                <input type="text" :maxlength="18" v-model.trim="userInfo.idCard" placeholder="请输入" />
            </view>
        </view>

        <view class="imgs">
            <view class="box" @click="chooseSFZ('frontUrl')">
                <view class="noPic" v-if="!checkStr(userInfo.frontUrl)">
                    <image src="/static/common/icon_camera.png" class="camera"></image>
                    <span>身份证正面</span>
                </view>
                <image v-else class="sfz" :src="userInfo.frontUrl" mode="aspectFit"></image>
            </view>

            <view class="box" @click="chooseSFZ('backUrl')">
                <view class="noPic" v-if="!checkStr(userInfo.backUrl)">
                    <image src="/static/common/icon_camera.png" class="camera"></image>
                    <span>身份证反面</span>
                </view>
                <image v-else class="sfz" :src="userInfo.backUrl" mode="aspectFit"></image>
            </view>
        </view>

        <view class="submitButton" :class="canSubmit && 'active'" @click="submit">同意协议并验证</view>

        <view class="agreement" @click="checkAgreement">
            <view class="checkBox">
                <image v-if="isCheckedAgreement" src="/static/common/icon_checked.png"></image>
            </view>
            <view class="agreementText">
                同意
                <span @click.stop="goAgreement">《实名认证隐私协议》</span>
            </view>
        </view>
    </view>

    <view class="content2" v-else>
        <view class="items" v-if="!userInfomation.identityPermissionsList.includes(4)">
            <view class="item">
                <span>实名认证</span>
                <span>{{ authenticationInfo.authenticationName[0] }}**</span>
            </view>
            <view class="item">
                <span>证件类型</span>
                <span>身份证</span>
            </view>
            <view class="item">
                <span>身份证号</span>
                <span>{{ `${authenticationInfo.authenticationIdCard[0]}*******${authenticationInfo.authenticationIdCard.slice(-1)[0]}` }}</span>
            </view>
        </view>

        <view class="items" v-else>
            <view class="item">
                <span>实名认证</span>
                <span>{{ authenticationInfo.legalPerson[0] }}**</span>
            </view>
            <view class="item">
                <span>证件类型</span>
                <span>身份证</span>
            </view>
            <view class="item">
                <span>身份证号</span>
                <span>{{ `${authenticationInfo?.certNo[0]}*******${authenticationInfo?.certNo?.slice(-1)[0]}` }}</span>
            </view>

            <view class="item">
                <text>审核状态</text>
                <view class="red" v-if="authenticationInfo?.status === -1" @click="edit">
                    <view class="">资料审核失败</view>

                    <view class="">原因：{{ authenticationInfo?.notes }}</view>
                    <view class="">点击重新提交</view>
                </view>
                <text class="blue" v-if="authenticationInfo?.status === 0">待审核</text>
                <text class="green" v-if="authenticationInfo?.status === 1">审核通过</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { checkStrLengthIsNotZero as checkStr, checkStrLengthIsNotZero, validateIDCard } from '@/utils/utils';
import { getUserInfoMethod, userApis } from '@/utils/apis';
import { uploadFile } from '@/utils/request';

const isAuthSuccess = ref(false);

onLoad(() => {
    getAuthenticationInfo();
});

let authenticationInfo = ref(null);
let userRole = ref(null);
let userInfomation = ref(null);
const getAuthenticationInfo = async () => {
    userInfomation.value = JSON.parse(uni.getStorageSync('userInfomation'));
    userRole.value = uni.getStorageSync('userRole');

    if (userInfomation.value.identityPermissionsList.includes(4) && userRole.value == 0) {
        let res = await userApis.getCompanyInfo();
        authenticationInfo.value = res.data;

        isAuthSuccess.value = !!authenticationInfo.value.companyName;
    } else {
        authenticationInfo.value = userInfomation.value.authentication;
        isAuthSuccess.value = !!authenticationInfo.value.authenticationStatus && authenticationInfo.value.authenticationStatus != 2;
    }
};

const userInfo = reactive({
    name: '',
    idCard: '',
    frontUrl: '',
    backUrl: ''
});

const edit = () => {
    uni.navigateTo({
        url: '/pages_user/setCompanyDetail/setCompanyDetail'
    });
};

const isCheckedAgreement = ref(false);
const checkAgreement = () => {
    isCheckedAgreement.value = !isCheckedAgreement.value;
};
const goAgreement = () => {
    uni.navigateTo({
        url: ''
    });
};

const chooseSFZ = (type) => {
    uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        success: function (res) {
            userInfo[type] = res.tempFilePaths[0];
        }
    });
};

const canSubmit = computed(() => {
    return isCheckedAgreement.value && checkStr(userInfo.name) && checkStr(userInfo.idCard) && checkStr(userInfo.frontUrl) && checkStr(userInfo.backUrl);
});

const submit = async () => {
    if (!canSubmit.value) return;

    if (!checkStrLengthIsNotZero(userInfo.name)) {
        uni.showToast({
            icon: 'none',
            title: '请填写姓名'
        });
        return;
    }
    if (!checkStrLengthIsNotZero(userInfo.frontUrl)) {
        uni.showToast({
            icon: 'none',
            title: '请上传身份证正面照片'
        });
        return;
    }
    if (!checkStrLengthIsNotZero(userInfo.backUrl)) {
        uni.showToast({
            icon: 'none',
            title: '请上传身份证反面照片'
        });
        return;
    }

    if (!validateIDCard(userInfo.idCard)) {
        uni.showToast({
            icon: 'none',
            title: '身份证号码格式不正确'
        });
        return;
    }

    let frontUrl = await uploadFile(userInfo.frontUrl);
    let backUrl = await uploadFile(userInfo.backUrl);

    await userApis.userAuthentication({
        name: userInfo.name,
        idCard: userInfo.idCard,
        frontUrl: frontUrl,
        backUrl: backUrl
    });

    await getUserInfoMethod();

    getAuthenticationInfo();

    uni.showToast({
        icon: 'success',
        title: '上传成功'
    });
};
</script>

<style lang="scss" scoped>
.content {
    padding: 92rpx 108rpx 0;

    .title {
        font-size: 44rpx;
        color: #333333;
        margin-bottom: 94rpx;
        text-align: center;
    }

    .inputs {
        .item {
            display: flex;
            align-items: center;
            gap: 36rpx;
            margin-bottom: 28rpx;
            .itemTitle {
                font-size: 28rpx;
                color: #333333;
            }
            input {
                flex: 1;
                height: 60rpx;
                border: none !important;
                border-bottom: 2rpx solid #e4e4e6 !important;
                font-weight: 400;
                font-size: 28rpx;
                color: #333333;
                &::placeholder {
                    color: #999999;
                }
            }
        }
    }

    .imgs {
        margin-top: 40rpx;
        display: flex;
        align-items: center;
        gap: 46rpx;

        .box {
            width: 244rpx;
            height: 164rpx;
            background: #f2f4f5;
            border-radius: 16rpx 16rpx 16rpx 16rpx;
            border: 3rpx dashed #999999;
            overflow: hidden;
            position: relative;

            image {
                width: 100%;
                height: 100%;
            }

            .noPic {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background-color: transparent;

                .camera {
                    width: 40rpx;
                    height: 40rpx;
                    margin-bottom: 4rpx;
                }
                span {
                    font-size: 24rpx;
                    color: #999999;
                    line-height: 34rpx;
                }
            }
        }
    }

    .submitButton {
        margin-top: 64rpx;
        margin-bottom: 46rpx;
        width: 100%;
        height: 92rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        background: #e4e4e6;

        font-size: 26rpx;
        color: #333333;
        line-height: 92rpx;
        text-align: center;

        &.active {
            background: #2c72ff;
            color: #fff;
        }
    }

    .agreement {
        display: flex;
        gap: 16rpx;
        align-items: center;
        justify-content: center;
        .checkBox {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 34rpx;
            height: 34rpx;
            border: 2rpx solid #2c72ff;
            border-radius: 50%;
            image {
                width: 15rpx;
                height: 12rpx;
            }
        }
        .agreementText {
            font-size: 24rpx;
            color: #a9a9a9;
            span {
                color: #2c72ff;
            }
        }
    }
}

.content2 {
    padding: 24rpx;
    background-color: #f2f3f5;

    .items {
        width: 100%;
        background: #ffffff;
        border-radius: 16rpx;
        padding: 0 32rpx;

        .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 64rpx;
            width: 100%;

            span {
                font-size: 28rpx;
                color: #333333;
                line-height: 64rpx;
            }

            span:last-child {
                color: #999;
            }

            .red {
                max-width: 80%;
                color: #ff6842 !important;
                text-align: right;
                view {
                    color: #ff6842;
                }
            }
            .blue {
                color: #2c73ff !important;
            }
            .green {
                color: #27c646 !important;
            }
        }
    }
}
</style>
